<template>
  <div class="home">
    <ul class="left">
      <li
        v-for="(item, index) in classList"
        :key="index"
        :class="{ active: item._id == classId }"
        @click="feileiBtn(item._id)"
      >
        {{ item.title }}
      </li>
    </ul>
    <ul class="right">
      <li v-for="(item, index) in viewList" :key="index" @click="jump(item)">
        <img :src="item.s_pic" alt="" />
        <p>{{ item.title }}</p>
        <p class="price">
          原价{{ item.old_price }}，活动折扣后的价格为
          <i style="color: red">{{ item.price }}</i>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
// import axios from 'axios';

export default {
  name: "Home",
  data() {
    return {
      classList: [], // 存储分类信息的
      goodsList: [], // 商品信息总数据
      viewList: [], // 展示在页面上的商品数据
      classId: 0, // 选择分类的id
    };
  },
  watch: {
    classId() {
      // 监听分类的id 来筛选符合分类的数据
      // filter 数组的过滤方法，返回符合条件的新数组
      this.viewList = this.goodsList.filter((item) => item.cid == this.classId);
      // console.log(this.viewList);
    },
  },
  created() {
    this.$axios.get("list.json").then((res) => {
      // console.log(res);
      this.goodsList = res.data.result;
    });
    this.$axios.get("fenlei.json").then((res) => {
      console.log(res);
      this.classList = res.data.result;
      // 数据请求过来 把 电脑办公的id 赋值给分类的id；
      this.classId = this.classList[0]._id;
    });
  },
  methods: {
    feileiBtn(val) {
      // 分类的点击事件
      this.classId = val;
    },
    jump(val){ // 商品的点击事件
      // query, params 都能通过路由来传参，query 必须使用path，params使用name
      // query 传参的时候，地址栏显示，传入的参数，params 传参的时候地址栏是不显示的
      // query 传参的时候 刷新不丢失数据，params 传参的时候 刷新数据会丢失
      // this.$router.push('/detail')
      
      // this.$router.push({path:'/detail',query:{obj:val}});
      
      this.$router.push({name:'Detail',params:{obj:val}});
      // console.log(val);
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  height: 100%;
  .left {
    width: 100px;
    height: 100%;
    border: 1px solid #ccc;
  }
  .right {
    flex: 1;
    height: 100%;
    overflow: auto;
    // width: calc(100% - 100px);
    // calc
  }
  li {
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #ccc;
    list-style: none;
  }
  .price {
    font-size: 12px;
  }
  .active {
    background: skyblue;
  }
}
</style>